<!-- Buttons to add to the header. -->
<core-navbar-buttons slot="end">
    @if (!courseContentsPage) {
        <ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [ariaLabel]="'core.info' | translate">
            <ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
        </ion-button>
    } @else {
        <core-context-menu>
            <core-context-menu-item [priority]="5000" [content]="'core.info' | translate" (action)="openModuleSummary()"
                iconAction="fas-circle-info" />
        </core-context-menu>
    }
</core-navbar-buttons>

<!-- Content. -->
<core-loading [hideUntil]="!showLoading">

    <!-- Activity info. -->
    <core-course-module-info [module]="module" [description]="survey && !survey.surveydone && !hasOffline && description"
        [component]="component" [componentId]="componentId" [courseId]="courseId" [hasDataToSync]="hasOffline"
        (completionChanged)="onCompletionChange()" />

    @if (survey) {
        @if (survey.surveydone) {
            <!-- Survey already done -->
            <ion-card class="core-success-card">
                <ion-item>
                    <ion-icon name="fas-check" slot="start" aria-hidden="true" />
                    <ion-label>
                        {{ 'addon.mod_survey.surveycompletednograph' | translate }}
                    </ion-label>
                </ion-item>
            </ion-card>
        } @else if(!hasOffline && questions && questions.length) {
            <!-- Survey questions -->
            <form>
                <ion-grid class="ion-no-padding ion-text-wrap">
                    @for (question of questions; track question.id; let questionIndex = $index; let isEven=$even) {
                        @if (question.multiArray?.length) {
                            <!-- Parent question (Category header) -->
                            <h3 class="ion-padding-horizontal" [class.ion-padding-top]="questionIndex === 1">{{ question.text }}</h3>

                            <ion-row class="ion-align-items-center ion-hide-md-down ion-padding">
                                <ion-col size="6" class="ion-padding">{{ 'addon.mod_survey.responses' | translate }}</ion-col>
                                <ion-col size="1" class="ion-text-center option-name">
                                    {{ 'core.question.notyetanswered' | translate }}
                                </ion-col>
                                @for (option of question.optionsArray; track option; let indexOption = $index) {
                                    <ion-col size="1" class="ion-text-center option-name">
                                        {{ option }}
                                    </ion-col>
                                }
                            </ion-row>
                            <ion-item class="ion-text-wrap addon-mod_survey-question" [class.even]="isEven" lines="full">
                                <ion-label>
                                    <p>{{ question.intro }}</p>
                                </ion-label>
                            </ion-item>

                        }

                        @if (question.parent !== 0) {
                            <!-- Subquestion -->
                            <ion-radio-group [(ngModel)]="answers[question.name]" [required]="question.required" [name]="question.name">
                                <ion-row class="ion-align-items-center ion-padding-horizontal" [class.even]="isEven">

                                    <ion-col size="6">
                                        <span id="addon-mod_survey-{{question.name}}" [core-mark-required]="question.required">
                                            <strong>{{question.num}}.</strong> {{ question.text }}
                                        </span>
                                    </ion-col>

                                    <!-- Tablet view: radio buttons -->
                                    <ion-col class="ion-hide-md-down ion-text-center" size="1">
                                        <!-- Empty slot to avoid errors on migration tslint checks -->
                                        <ion-radio value="-1"
                                            [attr.aria-label]="question.num + '. '+question.text + ': ' +
                                            ('core.question.notyetanswered' | translate)" />
                                    </ion-col>
                                    @for (option of question.optionsArray; track option; let value = $index) {
                                        <ion-col class="ion-hide-md-down ion-text-center" size="1">
                                            <!-- Empty slot to avoid errors on migration tslint checks -->
                                            <ion-radio [value]="value + 1"
                                                [attr.aria-label]="question.num + '. '+question.text + ': ' + option" />
                                        </ion-col>
                                    }
                                    <ion-col class="ion-hide-md-up" size="5">
                                        <ion-select class="ion-padding" [(ngModel)]="answers[question.name]"
                                            [required]="question.required" [attr.aria-labelledby]="'addon-mod_survey-'+question.name"
                                            interface="action-sheet" [name]="question.name" [cancelText]="'core.cancel' | translate"
                                            [interfaceOptions]="{header: question.text}">
                                            <ion-select-option value="-1" selected disabled>
                                                {{ 'core.question.notyetanswered' | translate }}</ion-select-option>
                                            @for (option of question.optionsArray; track option; let value = $index) {
                                                <ion-select-option [value]="value +1">{{option}}</ion-select-option>
                                            }
                                        </ion-select>
                                    </ion-col>
                                </ion-row>
                            </ion-radio-group>

                        } @else if (!question.multiArray || question.multiArray.length === 0) {
                            <!-- Single question (don't belong to a category) -->
                            @if (question.type > 0) {
                                <ion-row class="ion-align-items-center ion-padding" [class.even]="isEven">
                                    <ion-col size="6">
                                        <span id="addon-mod_survey-{{question.name}}" [core-mark-required]="question.required">
                                            <strong>{{question.num}}.</strong> {{ question.text }}
                                        </span>
                                    </ion-col>
                                    <ion-col size="6">
                                        <ion-select class="ion-padding" [(ngModel)]="answers[question.name]"
                                            [required]="question.required" [attr.aria-labelledby]="'addon-mod_survey-'+question.name"
                                            interface="action-sheet" [name]="question.name" [cancelText]="'core.cancel' | translate"
                                            [interfaceOptions]="{header: question.text}">
                                            <ion-select-option [value]="question.required ? '-1' : '0'" selected
                                                [disabled]="question.required">
                                                {{ 'core.question.notyetanswered' | translate }}
                                            </ion-select-option>
                                            @for (option of question.optionsArray; track option; let value = $index) {
                                                <ion-select-option [value]="value +1">{{option}}</ion-select-option>
                                            }
                                        </ion-select>
                                    </ion-col>
                                </ion-row>
                            } @else {
                                <ion-item class="ion-text-wrap" [class.even]="isEven" lines="none">
                                    <ion-textarea labelPlacement="stacked" [(ngModel)]="answers[question.name]" [name]="question.name"
                                        [required]="question.required">
                                        <p slot="label" [core-mark-required]="question.required">
                                            <strong>{{question.num}}.</strong> {{ question.text }}
                                        </p>
                                    </ion-textarea>
                                </ion-item>
                            }
                        }
                    }
                </ion-grid>
            </form>
        }
    }

    @if (!showLoading) {
        <div collapsible-footer slot="fixed">
            @if (survey && (survey.surveydone || (!hasOffline && questions && questions.length))) {
                <div class="list-item-limited-width">
                    @if (survey.surveydone) {
                        <ion-button class="ion-text-wrap ion-margin" expand="block" [href]="module.url" core-link>
                            {{ 'addon.mod_survey.results' | translate }}
                            <ion-icon name="fas-up-right-from-square" slot="end" aria-hidden="true" />
                        </ion-button>
                    } @else if (!hasOffline && questions && questions.length) {
                        <ion-button expand="block" class="ion-text-wrap ion-margin" (click)="submit()" [disabled]="!isValidResponse()">
                            {{ 'core.submit' | translate }}
                        </ion-button>
                    }
                </div>
            }

            <core-course-module-navigation [courseId]="courseId" [currentModuleId]="module.id" />
        </div>
    }
</core-loading>
